<template>
  <div id="query_air_price_res_view" class="absolute">
    <header class="mui-bar mui-bar-nav">
      <a class=" mui-icon  mui-pull-left  arr_left" @tap="clese_this">
      </a>
      <h1 class="mui-title">机票查询结果</h1>
    </header>
    <div class="mui-content bg_gree">

      <div class="air_res_list">

        <div class="item" v-for="(i,k) in list">
          <div class="block">
            <div class="time">
              <span>{{i.IBE_Flights.IBE_Flight.depTime|to_time}}</span>
              <p>{{i.IBE_Flights.IBE_Flight.orgCity}}{{i.IBE_Flights.IBE_Flight.OrgAirportTerminal}}</p>
            </div>
            <div class="time center">
              <p>{{i.IBE_Flights.IBE_Flight.flightTime}}</p>
            </div>
            <div class="time">
              <span>{{i.IBE_Flights.IBE_Flight.arrtime|to_time }}</span>
              <p>{{i.IBE_Flights.IBE_Flight.dstcity}} {{i.IBE_Flights.IBE_Flight.DstAirportTerminal}}</p>
            </div>
          </div>
          <div class="right">
            <div>经济舱</div>
            <span v-show="i.IBE_Flights.IBE_Flight.meal=='true'">餐</span>
          </div>
          <div class="bottom_all">
      			<p class="bottom">{{i.IBE_Flights.IBE_Flight.FlightNO}} {{i.IBE_Flights.IBE_Flight.link}} </p>
          	<span>{{i.IBE_Flights.IBE_Flight.PriceFare}}元</span>
          </div>
          
        </div>


      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "query_air_price_res",
    props: ['list'],
    methods: {
      clese_this() {
        this.$emit("close_res")
      }
    },
    filters:{
      to_time(t){
        return t[0]+t[1]+":"+t[2]+t[3];
      }
    }
  }
</script>

<style scoped lang="less">
  .absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    height: 100%;
    background-color: #fff;
  }
  .main_box {
    width: 14.72rem;
    margin-left: 0.64rem;
    height: 100%;
    box-shadow: 0 0 0.2133rem #ddd;
    border-radius: 0.256rem;
    overflow: hidden;
    padding-bottom: 0.8533rem;
    margin-top: 0.64rem;
  }
  .main_box .title {
    width: 100%;
    height: 1.8347rem;
    line-height: 1.8347rem;
    text-align: center;
    background-color: #1c83fc;
    color: #fff;
  }
  .main_box .body {
    padding-top: 0.64rem;
  }
  .main_box .body .input_box {
    height: 1.792rem;
    line-height: 1.792rem;
    width: 12.8rem;
    margin-left: 0.9387rem;
    border-bottom: 1px solid #dcdcdc;
  }
  .main_box .body .input_box .input_name {
    font-size: 0.6827rem;
    width: 3.2rem;
    display: inline-block;
  }
  .main_box .body .input_box .input {
    font-size: 0.6827rem;
    width: 9.088rem;
    margin: 0;

    padding: 0;
    border: none;
  }
  .main_box .query_btn {
    width: 12.8rem;
    margin-left: 0.9387rem;
    margin-top: 1.4933rem;
    border-color: #1c83fc;
    color: #1c83fc;
  }
  .bg_blue {
    background-color: #1c83fc !important;
    color: #fff;
  }
  .bg_gree {
    background-color: #f6f6f6 !important;
  }
  .weather_res {
    padding: 0.64rem;
  }
  .weather_res .panel {
    width: 100%;
    min-height: 3.072rem;
    background-color: #fff;
    border-radius: 0.256rem;
    margin-bottom: 0.4267rem;
    padding-bottom: 0.4267rem;
    padding-top: 0.4267rem;
  }
  .weather_res .panel .title {
    color: #1c83fc;
  }
  .weather_res .panel .icon_img2 {
    width: 2.3893rem;
    height: 2.3893rem;
    float: left;
    margin-left: 0.8533rem;
  }
  .weather_res .panel .icon_img2 img {
    width: 100%;
  }
  .weather_res .panel .right_info {
    width: 7.68rem;
    float: right;
    color: #353535;
    line-height: 2.3893rem;
    font-size: 0.768rem;
    margin-right: 0.8533rem;
    text-align: right;
  }
  .weather_res .panel .right_info .week {
    float: left;
  }
  .weather_res .break {
    padding-left: 0.8533rem;
    padding-top: 0.8533rem;
  }
  .weather_res .break .title {
    font-size: 0.6827rem;
  }
  .weather_res .break p {
    font-size: 0.4693rem;
  }
  .weather_res .break p .break_date {
    float: right;
    margin-right: 0.8533rem;
  }
  .weather_res .top_panel .date {
    height: 1.7067rem;
    line-height: 1.7067rem;
    font-size: 0.6827rem;
    text-align: center;
    color: #353535;
  }
  .weather_res .top_panel .icon_img {
    margin-left: 0.8533rem;
    width: 4.2667rem;
    height: 4.2667rem;
    float: left;
  }
  .weather_res .top_panel .icon_img img {
    width: 100%;
  }
  .weather_res .top_panel .temp {
    float: right;
    color: #353535;
    font-size: 1.4933rem;
    margin-right: 0.8533rem;
    margin-top: 0.64rem;
  }
  .weather_res .top_panel .temp .address {
    margin-top: 0.4267rem;
    text-align: right;
    font-size: 0.8747rem;
  }
  .weather_res .top_panel .bottom {
    font-size: 0.64rem;
    line-height: 1.28rem;
    height: 1.28rem;
    color: #353535;
    clear: both;
    padding-left: 0.8533rem;
  }
  .res_list {
    color: #353535;
  }
  .res_list .item {
    width: 16rem;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    font-size: 0.5973rem;
    padding-top: 0.4267rem;
    padding-bottom: 0.4267rem;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
  }
  .res_list .item .line1 span:nth-child(1) {
    font-size: 0.5973rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(2) {
    font-size: 0.5547rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(2) div {
    font-size: 0.4693rem;
  }
  .res_list .item .line1 .icon_img {
    display: inline-block;
    width: 0.5547rem;
    height: 0.5547rem;
    background-size: 100% 100%;
    vertical-align: middle;
  }
  .res_list .item .line1 span:nth-child(3) {
    font-size: 0.4693rem;
    color: #aaa;
  }
  .res_list .item .line1 span:nth-child(4) {
    font-size: 0.5547rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(4) div {
    font-size: 0.4693rem;
  }
  .res_list .item .line2 span {
    font-size: 0.512rem;
  }
  .res_list .item .block {
    overflow: hidden;
  }
  .res_list .item .block span {
    float: left;
    width: 25%;
  }
  .air_res_list .item {
    background-color: #fff;
    padding: 0.2133rem 0;
    width: 14.72rem;
    min-height: 2.1333rem;
    margin-left: 0.64rem;
    margin-top: 0.4267rem;
    position: relative;
  }
  .air_res_list .item .block {
    margin-left: 0.4267rem;
    margin-top: 0.4267rem;
    overflow: hidden;
  }
  .air_res_list .item .block .time {
    color: #353535;
    float: left;
  }
  .air_res_list .item .block .time span {
    font-size: 1.0667rem;
  }
  .air_res_list .item .block .center {
    padding-top: 0.384rem;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
  }
  .air_res_list .item .right {
    position: absolute;
    right: 0.4267rem;
    top: 0.8533rem;
    color: #aaa;
    font-size: 0.64rem;
    text-align: center;
  }
  .air_res_list .item .bottom {
    margin-left: 0.4267rem;
    width: 5rem;
    float: left;
  }
  .bottom_all{
    height: auto;
    color: #8f8f94;
    overflow: hidden;
    font-size: 14px;
  }
  .bottom_all span{
  	float: right;
    margin-right: 10px;
  }

</style>
